<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui-modules</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"/>
    <link rel="stylesheet" href="../layui-admin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../layui-admin/style/admin.css" media="all">
    <link rel="stylesheet" href="../city-picker/css/city-picker.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">layui-modules</div>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <table id="tableDemo" lay-filter="tableDemo" class="layui-hide"></table>
                </div>
                <div class="layui-col-md6">
                    <table id="opTableDemo" lay-filter="opTableDemo" class="layui-hide"></table>
                </div>
            </div>
            <div class="layui-tab layui-steps layui-steps-readonly" lay-filter="stepsForget">
                <ul class="layui-tab-title">
                    <li class="layui-this">
                        <i class="layui-icon layui-icon-ok">1</i>
                        <span class="layui-steps-title">第一步</span>
                        <span class="layui-steps-content">填写注册手机号</span>
                    </li>
                    <li>
                        <i class="layui-icon layui-icon-ok">2</i>
                        <span class="layui-steps-title">第二步</span>
                        <span class="layui-steps-content">获取短信验证码</span>
                    </li>
                    <li>
                        <i class="layui-icon layui-icon-ok">3</i>
                        <span class="layui-steps-title">第三步</span>
                        <span class="layui-steps-content">修改登录密码</span>
                    </li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-row">
                            <div class="layui-col-md3">
                                <div id="carouselDemo" class="layui-carousel" style="background-color: transparent;">
                                    <div carousel-item style="text-align: center; line-height: 200px; background-color: transparent;">
                                        <div style="background-color: transparent;"><img src="img/a1.jpg" width="100%"></div>
                                        <div style="background-color: transparent;"><img src="img/b1.jpg" width="100%"></div>
                                        <div style="background-color: transparent;"><img src="img/c1.jpg" width="100%"></div>
                                        <div style="background-color: transparent;"><img src="img/d1.jpg" width="100%"></div>
                                    </div>
                                </div>
                                <div class="layui-upload-drag" id="upload">
                                    <i class="layui-icon">&#xe67c;</i>
                                    <p>点击上传，或将文件拖拽到此处</p>
                                    <hr>
                                    <div class="layui-progress layui-progress-big" lay-showPercent="true" lay-filter="upload-progress">
                                        <div class="layui-progress-bar" lay-percent="0%"></div>
                                    </div>
                                    <p id="upload-msg"></p>
                                </div>
                            </div>
                            <div class="layui-col-md9">
                                <form class="layui-form">
                                    <div class="layui-form-item">
                                        <div style="position: relative;">
                                            <input id="cityPicker" name="cityPicker" class="layui-input" placeholder="请选择省/市/区"/>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <input type="number" class="layui-input" value="9" min="0" max="10" number-input/>
                                    </div>
                                    <div class="layui-form-item">
                                        <input id="cron" name="cron" value="* * * * * ?" class="layui-input">
                                    </div>
                                    <div class="layui-form-item">
                                        <input id="tags1" name="tags1" value="tags1,tags2,tags3" class="layui-input">
                                    </div>
                                    <div class="layui-form-item">
                                        <input id="tags2" name="tags2" value="tags1,tags2,tags3" class="layui-input">
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button id="noticeDemo" type="button" class="layui-btn layui-btn-primary layui-btn-radius">
                                                通知
                                            </button>
                                            <button data-steps="next" type="button" class="layui-btn layui-btn-radius">
                                                下一步
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <form class="layui-form">
                            <div class="layui-form-item">

                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button data-steps="prev" type="button" class="layui-btn layui-btn-primary layui-btn-radius">
                                        上一步
                                    </button>
                                    <button data-steps="next" type="button" class="layui-btn layui-btn-radius">
                                        下一步
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-tab-item">
                        <form class="layui-form">
                            <div class="layui-form-item">

                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button data-steps="prev" type="button" class="layui-btn layui-btn-primary layui-btn-radius">
                                        上一步
                                    </button>
                                    <button data-steps="next" type="button" class="layui-btn layui-btn-radius">
                                        下一步
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../layui-admin/layui/layui.js"></script>
<script src="../city-picker/js/city-picker.data.js"></script>
<script src="../city-picker/js/city-picker.js"></script>
<script>
    layui.config({
        base: '../layui-admin/'
    }).extend({
        index: 'lib/index'
        , steps: 'steps/steps'
        , notice: 'notice/notice'
        , cron: 'cron/cron'
        , opTable: 'opTable/opTable'
        , tagsInput: 'tagsInput/tagsInput'
    }).use(['index', 'steps', 'notice', 'cron', 'numberInput', 'opTable', 'tagsInput'], function () {
        const $ = layui.$;
        const layer = layui.layer;
        const table = layui.table;
        const form = layui.form;
        const element = layui.element;
        const carousel = layui.carousel;
        carousel.render({
            elem: '#carouselDemo'
            , width: '200px'
            , height: '200px'
        });
        const upload = layui.upload;
        upload.render({
            elem: '#upload'
            , multiple: true
            , accept: 'file'
            , acceptMime: '.jpg,.png,.bmp,.mp4,.zip'
            , exts: 'jpg|png|bmp|mp4|zip'
            , url: '../admin/oss/upload'
            , data: {bucketName: 'bn'}
            , before: function (obj) {
                $('#upload-msg').html('');
                element.progress('upload-progress', '0%');
                layer.msg('上传中，请稍后...', {time: 0, icon: 16, shade: 0.01});
            }
            , done: function (res, index, upload) {
                $('#upload-msg').append('<p>' + index + '.' + JSON.stringify(res) + '</p>');
                if (res.success) {
                    layer.msg('上传成功！');
                } else {
                    layer.msg('上传失败！');
                }
            }
            , error: function (index, upload) {
                layer.msg('上传异常！');
            }
            , progress: function (n, elem, res, index) {
                element.progress('upload-progress', n + '%');
            }
        })
        const steps = layui.steps;
        const cityPicker = $("#cityPicker");
        cityPicker.citypicker();

        const numberInput = layui.numberInput;
        numberInput.render();

        $('#tags1').tagsInput();
        $('#tags2').tagsInput({skin: 'tagsinput-default'});

        const notice = layui.notice;
        $('#noticeDemo').on('click', function () {
            notice.success({title: '消息通知', message: '你有新的消息，请注意查收!'});
            notice.error({title: '消息通知', message: '你有新的消息，请注意查收!'});
            notice.warning({title: '消息通知', message: '你有新的消息，请注意查收!'});
            notice.info({title: '消息通知', message: '你有新的消息，请注意查收!'});
            notice.msg('This is a message of success', {icon: 1});
        });


        const cron = layui.cron;
        cron.render({
            elem: "#cron"
        });

        table.render({
            id: 'tableDemo'
            , elem: '#tableDemo'
            , toolbar: 'default'
            , cols: [[
                {type: 'numbers', title: '编号'}
                , {type: 'checkbox', title: '选择'}
                , {field: 'id', title: 'ID', width: 100}
                , {
                    field: 'img', title: '照片', align: 'center', width: 100, templet: function (d) {
                        return '<img src="' + d.img + '" height="100%" lay-event="show-img"/>';
                    }
                }
                , {
                    field: 'video', title: '视频', align: 'center', width: 100, templet: function (d) {
                        return '<video src="' + d.video + '" height="100%"  lay-event="show-video"/>';
                    }
                }
                , {field: 'name', title: '用户名'}
            ]]
            , data: [
                {id: '000001', name: '张三', img: 'img/a1.jpg', video: 'img/v.mp4'}
                , {id: '000002', name: '李四', img: 'img/b1.jpg', video: 'img/v.mp4'}
                , {id: '000002', name: '王五', img: 'img/c1.jpg', video: 'img/v.mp4'}
                , {id: '000002', name: '马八', img: 'img/d1.jpg', video: 'img/v.mp4'}
            ]
        });
        table.on('tool(tableDemo)', function (obj) {
            if (obj.event === 'show-img') {
                layer.open({
                    type: 1
                    , title: false
                    , area: ['100', '300px']
                    , shadeClose: true
                    , content: '<div style="height:100%;text-align: center;"><img src="' + obj.data.img + '" height="100%"></div>'
                });
            }
            if (obj.event === 'show-video') {
                layer.open({
                    type: 1
                    , title: false
                    , area: ['100', '300px']
                    , shadeClose: true
                    , content: '<div style="height:100%;text-align: center;"><video src="' + obj.data.video + '" height="100%" controls/></div>'
                });
            }
        });

        const opTable = layui.opTable;
        opTable.render({
            id: 'opTableDemo'
            , elem: '#opTableDemo'
            , toolbar: 'default'
            , cols: [[
                {type: 'numbers', title: '编号'}
                , {type: 'checkbox', title: '选择'}
                , {field: 'id', title: 'ID', width: 100}
                , {
                    field: 'img', title: '照片', width: 100, align: 'center', templet: function (d) {
                        const t = [];
                        t.push('<div id="carousel-img' + d.id + '" class="layui-carousel" lay-event="show-img" style="background-color: transparent;">');
                        t.push('  <div carousel-item style="height: 100%;text-align: center;background-color: transparent;">');
                        t.push('    <div style="background-color: transparent;"><img src="' + d.img + '" style="height: 100%;"></div>');
                        t.push('    <div style="background-color: transparent;"><img src="' + d.img1 + '" style="height: 100%;"></div>');
                        t.push('    <div style="background-color: transparent;"><img src="' + d.img2 + '" style="height: 100%;"></div>');
                        t.push('    <div style="background-color: transparent;"><img src="' + d.img3 + '" style="height: 100%;"></div>');
                        t.push('  </div>');
                        t.push('</div>');
                        return t.join(' ');
                    }
                }
                , {field: 'name', title: '用户名'}
            ]]
            , data: [
                {id: '000001', name: '张三', img: 'img/a1.jpg', img1: 'img/b1.jpg', img2: 'img/c1.jpg', img3: 'img/d1.jpg'}
                , {id: '000002', name: '李四', img: 'img/b1.jpg', img1: 'img/c1.jpg', img2: 'img/d1.jpg', img3: 'img/a1.jpg'}
                , {id: '000003', name: '王五', img: 'img/c1.jpg', img1: 'img/d1.jpg', img2: 'img/a1.jpg', img3: 'img/b1.jpg'}
                , {id: '000004', name: '马八', img: 'img/d1.jpg', img1: 'img/a1.jpg', img2: 'img/b1.jpg', img3: 'img/c1.jpg'}
            ]
            , isAloneColumn: false
            , openColumnIndex: 2
            , openCols: [{
                field: 'id', title: '', templet: function (data) {
                    const t = [];
                    //t.push('<blockquote class="layui-elem-quote">');
                    //t.push(JSON.stringify(data));
                    //t.push('</blockquote>');

                    t.push('<div id="photos-img' + data.id + '" class="layer-photos-demo">');
                    t.push('  <img layer-src="' + data.img + '" src="' + data.img + '" alt="' + data.name + '" >');
                    t.push('  <img layer-src="' + data.img1 + '" src="' + data.img1 + '" alt="' + data.name + '">');
                    t.push('  <img layer-src="' + data.img2 + '" src="' + data.img2 + '" alt="' + data.name + '">');
                    t.push('  <img layer-src="' + data.img3 + '" src="' + data.img3 + '" alt="' + data.name + '">');
                    t.push('</div>');
                    return t.join(' ');
                }
            }]
            , done: function (res, curr, count) {
                layui.each(res.data, function (index, item) {
                    carousel.render({
                        elem: '#carousel-img' + item.id
                        , width: '100%'
                        , height: '100%'
                        , indicator: 'none'
                        , arrow: 'none'
                    });
                });
            }
            , onInitSuccess: function (data, index, dom) {
                layer.photos({
                    photos: '#photos-img' + data.id
                });
            }
        });
        table.on('tool(opTableDemo)', function (obj) {
            if (obj.event === 'show-img') {
                layer.photos({
                    photos: {
                        title: obj.data.name
                        , id: obj.data.id
                        , data: [
                            {alt: obj.data.name, pid: 0, src: obj.data.img}
                            , {alt: obj.data.name, pid: 1, src: obj.data.img1}
                            , {alt: obj.data.name, pid: 2, src: obj.data.img2}
                            , {alt: obj.data.name, pid: 3, src: obj.data.img3}
                        ]
                    }
                });
            }
        });
    });
</script>
</body>
</html>
